<template>
  <div style="height: 100%;">
    <van-row class="search-row">
      <van-search v-model="formData.pinm" maxlength="20" show-action placeholder="品名" @search="onRefresh">
        <template #action>
          <div @click="onRefresh">搜索</div>
        </template>
      </van-search>
      <div class="filter-icon">
        <van-icon name="filter-o" @click="$refs.queryPopupRef.show = true"/>
      </div>
    </van-row>
    <!-- 办公物资列表 -->
    <van-row class="listCon">
      <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" :finished-text="listData.length ? '没有更多了' : ''"
                  @load="onLoad">
          <van-swipe-cell v-for="val in listData" :key="val.index">
            <div class="cellContent">
              <div class="top">
                <div class="flexTit">
                  <p class="title">{{ val.PINM }}</p>
                  <p class="other">
                    <van-checkbox v-model="val.checked" @change="isChange">
                      <template #icon="props">
                        <van-icon v-if="!props.checked" name="plus" color="#1989fa"/>
                      </template>
                    </van-checkbox>
                  </p>
                </div>
              </div>
              <div>
                <p>
                  <span class="label"> 品名：</span>
                  {{ val.PINM || "-" }}
                </p>
                <p>
                  <span class="label">物资大类：</span>
                  {{ val.wzdlName || "-" }}

                </p>
                <p>
                  <span class="label">物资小类：</span>
                  {{ val.wzxlName || "-" }}
                </p>

              </div>
            </div>
          </van-swipe-cell>
        </van-list>
        <van-empty v-if="!loading && !listData.length" class="custom-image"
                   :image="require('../../../../assets/images/empty.png')" description="暂无数据"/>
      </van-pull-refresh>
    </van-row>
    <!-- 筛选条件弹出框 -->
    <queryPopup ref="queryPopupRef" @handleSearch="epidMaterialId" @handleReset="resetForm">
      <van-form class="filterBox">
        <label>物资大类：</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="dlshowPicker = true">
              <span v-if="!dlcanteenText" style="color: #aaa">请选择大类</span>
              <span v-else>{{ dlcanteenText }}</span>
            </div>
          </template>
        </van-field>
        <label>物资小类：</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="changeXl">
              <span v-if="!xlcanteenText" style="color: #aaa">请选择小类</span>
              <span v-else>{{ xlcanteenText }}</span>
            </div>
          </template>
        </van-field>
        <label>品名：</label>
        <van-field v-model="formData.pinm" placeholder="品名"/>
      </van-form>
    </queryPopup>
    <van-action-sheet v-model="dlshowPicker" cancel-text="取消" :actions="dlList" @select="dlonConfirm"/>
    <van-action-sheet v-model="xlshowPicker" cancel-text="取消" :actions="xlList" @select="xlonConfirm"/>
    <van-submit-bar :price="leg" :decimal-length="0" label="已选中：" currency="" button-text="确定" @submit="appliance"/>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>
<script>
import {getPinm, getwzxl, queryBgwzxx} from "@/api/srvAssurance/assetLabel/assetLabel";
import {queryDic} from '@/api/common';

export default {
  data() {
    return {
      leg: 0, // 选择数量
      removeLsit: [],
      dlcanteenText: '',
      xlcanteenText: '',
      dlshowPicker: false,
      xlshowPicker: false,
      dlList: [],
      xlList: [],
      wzxlList: [],
      formData: {
        pinm: '',
        wzdl: '',
        wzxl: '',
        statusBf: '03',
        wxsqqc: true,
        searchType: 'simple',
        page: 1,
        rows: 20
      },
      refreshLoading: false,
      loading: false,
      finished: false,
      listData: [], // 列表数据
      selectList: [],
    };
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.iniSelect()
  },
  methods: {
    // 确定筛选
    epidMaterialId() {
      this.$refs.queryPopupRef.show = false;
      this.onRefresh()
    },
    dlonConfirm(item) {
      this.formData.wzdl = item.codeValue;
      this.dlcanteenText = item.valueAlias;
      this.dlshowPicker = false;
    },
    xlonConfirm(item) {
      this.formData.wzxl = item.value;
      this.xlcanteenText = item.name;
      this.xlshowPicker = false;
    },
    //选择小类
    changeXl() {
      if (this.formData.wzdl == null || '' == this.formData.wzdl) {
        this.$Notify({type: 'warning', message: "请先选择大类！"});
        return
      }
      getwzxl({leib: this.formData.wzdl}).then(res => {
        this.xlList = res;
        this.xlshowPicker = true;
      })
    },
    translate() {
      this.listData.forEach(item => {
        this.dlList.some(val => {
          if (val.codeValue === item.WZDL) {
            this.$set(item, 'wzdlName', val.valueAlias);
            return true
          }
        })
        this.wzxlList.some(val => {
          if (val.codeValue === item.WZXL) {
            this.$set(item, 'wzxlName', val.valueAlias);
            return true
          }
        })
      });
    },
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.page = 1;
      this.leg = this.removeLsit.length * 100;
      this.getSearch();
    },
    onLoad() {
      this.formData.page++;
      this.getSearch();
    },
    // 获取表格数据
    getSearch() {
      this.loading = true;
      queryBgwzxx(this.formData).then((res) => {
        this.loading = false;
        if (res.data.length > 0) {
          let arr = res.data;
          arr.map(item => {
            this.$set(item, 'checked', false)
          })
          this.listData = arr;
          // this.listData = [...this.listData, ...res.data];
          this.translate();
          this.decideLsit();
          if (this.listData.length >= res.totalCount) {
            this.finished = true;
          }
        } else {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      });
    },
    // 选中办公物资
    isChange() {
      let arr = [];
      this.listData.map(item => {
        if (item.checked) {
          arr.push(item)
        }
      })
      this.selectList = arr;
      this.leg = this.selectList.length * 100;
    },
    //对数组去重
    unique(arr) {
      return arr.filter((item, index, arr) => {
        return arr.indexOf(item, 0) === index;
      });
    },
    //已选中办公物资
    appliance() {
      this.$emit('restLsit', []);
      let arr = [];
      var list = this.unique(this.selectList);
      list.forEach(e => {
        let obj = {
          ID: e.ID,
          PINM: e.PINM,
          WUZDL: e.WZDL,
          WUZXL: e.WZXL,
          BAOGR: e.BAOGR,
          BGRNAME: e.BAOGRNAME,
          wzdlName: e.wzdlName,
          wzxlName: e.wzxlName,
        }
        arr.push(obj)
      })
      this.$emit('addList', arr);
      this.isModal();
    },
    //返回上一页
    isModal() {
      this.$emit('goBack');
    },
    // 重置表单
    resetForm() {
      this.formData = {
        pinm: '',
        wzdl: '',
        wzxl: '',
        statusBf: '03',
        wxsqqc: true,
        searchType: 'simple',
        page: 1,
        rows: 20
      };
      this.dlcanteenText = '';
      this.xlcanteenText = '';
      this.getSearch();
    },
    //判断列表中的数据是否选中
    decideLsit() {
      this.removeLsit.forEach(e => {
        this.listData.forEach(item => {
          if (item.ID == e.ID) {
            item.checked = true
          }
        })
      })
    },
    iniSelect() {
      //大类
      queryDic('RA_WORK_FACILITYBIG_CODE').then(res => {
        if (res.code == 1000) {
          this.dlList = res.data
        }
      })
      //小类
      queryDic('RA_WORK_FACILITYSMALL_CODE').then(res => {
        if (res.code == 1000) {
          this.wzxlList = res.data
        }
      })
    }
  },
};
</script>

<style scoped lang="less">
.listCon {
  height: calc(100% - 105px);

  .cellContent {
    padding: 10px;

    .flex {
      display: flex;

      p:nth-of-type(1) {
        flex: inherit !important;
        width: 45%;
      }
    }
  }

  .redSpan {
    color: red;
  }
}
</style>
